<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="box">
    <div class="head">
      <ul class="head-1">
        <li>
          <h3 class="title">学生姓名:</h3>
          <input type="text" placeholder="输入学生姓名" class="input">
        </li>
        <li>
          <h3 class="title">市场部:</h3>
          <select class="input">
            <option>招生办</option>
            <option>中原市场部</option>
            <option>春峰市场部</option>
            <option>邯郸市场部</option>
          </select>
        </li>
        <li>
          <h3 class="title">学院:</h3>
          <select class="input">
            <option>游戏学院</option>
            <option>网站学院</option>

          </select>
        </li>
        <li>
          <h3 class="title">工作城市:</h3>
          <select class="input">
            <option>北京</option>
            <option>天津</option>
            <option>广州</option>
            <option>杭州</option>
          </select>
        </li>
        <li>
          <el-button class="primary1">查询</el-button>
        </li>
      </ul>
      <div>

      </div>
      <div class="primary2">
        <el-button class="primary">新增检测人员</el-button>
        <el-button class="primary">批量删除</el-button>
      </div>
    </div>
    <div class="box-2">
      <el-table :data="tableData" style="width: 100%" max-height="450">
        <el-table-column type="selection" width="80" />
        <el-table-column prop="ID" label="ID" width="190" />
        <el-table-column prop="name" label="检测人员" width="190" />
        <el-table-column prop="state" label="检测实时图" width="190" />
        <el-table-column prop="city" label="检测区域" width="190" />
        <el-table-column prop="address" label="环境检测状态" width="190" />
        <el-table-column prop="zip" label="用水测试" width="190" />
        <el-table-column fixed="right" label="Operations" width="300">
          <template #default="scope">
            <el-button type="primary">查看</el-button>
            <el-button type="primary">编辑</el-button>
            <el-button type="primary" @click.prevent="deleteRow(scope.$index)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button class="mt-4" style="width: 100%" @click="onAddItem">Add Item</el-button>
    </div>
    <div class="box-foot">
      <el-pagination background layout="prev, pager, next" :total="100" />
    </div>
  </div>
</template>

<script lang="ts" setup>
const currentPage1 = ref(5)
const currentPage2 = ref(5)
const currentPage3 = ref(5)
const currentPage4 = ref(4)
const pageSize2 = ref(100)
const pageSize3 = ref(100)
const pageSize4 = ref(100)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

import { ref } from 'vue'
// import dayjs from 'dayjs'

const now = new Date()

const tableData = ref([
  {
    ID: '35',
    name: '张三',
    state: '1',
    city: '报告厅',
    address: '良好',
    zip: '18L',
  },
  {
    ID: '24',
    name: '李四',
    state: '1',
    city: '2教学楼',
    address: '良好',
    zip: '10L',
  },
  {
    ID: '67',
    name: '王五',
    state: '1',
    city: '宿舍楼',
    address: '良好',
    zip: '30L',
  },
])

const deleteRow = (index: number) => {
  tableData.value.splice(index, 1)
}

const onAddItem = () => {
  now.setDate(now.getDate() + 1)
  tableData.value.push({
    ID: '11',
    name: '老三',
    state: '2',
    city: '7宿舍楼',
    address: '优秀',
    zip: '12L',
  })
}
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
}


.head {
  padding: 20px;
}

.box-foot {
  float: right;
  padding: 20px;
}

.primary {
  background-color: #4060c7;
  color: #fff;
  height: 40px;
}

.primary2 {
  padding: 30px;
}

.primary1 {
  background-color: #4060c7;
  color: #fff;
  height: 40px;
}

.head li {
  width: 250px;
  height: 60px;
  text-align: center;
  line-height: 50px;
  margin-left: 70px;
}

.head-1 {
  display: flex;
}

.title {
  float: left;
}

.input {
  width: 150px;
  height: 35px;
  margin-top: 5px;
}
</style>
